<html>
    <head>
        <meta charset="UTF-8">
        <title>select动态添加选项</title>
        <script type="text/javascript">
            function addNewOption(){
            //1、获取课程名
            var courseName = document.getElementById("courseName").value;
            
            //2、获取下拉对象
            var courseSelect = document.getElementById("courseSelect");
            //3、创建option新节点
            var optionElt = document.createElement("option");
            optionElt.value = courseName;
            optionElt.innerHTML = courseName;

            //4、将option新节点添加下拉列表对象中
            courseSelect.appendChild(optionElt);
        }
        
        
        </script>
    </head>
    <body>
        <input type="text" id="courseName"/>
        <input type="button" value="添加" onclick="addNewOption();"/>
        <hr>
        <select id="courseSelect">
            <option>--请选择课程--</option>
        </select>
    </body>
</html>